<template>
	<div id="share2">
		<div class="share2_1">
			<img src="../../static/img/logo-02.png"/>
			<img src="../../static/img/share-13.png"/>
		</div>
		<div class="share2_2">
			<!-------二维码----------->
			<div class="share2_code">
				<div id="QRcode">
					
				</div>
				<div class="share2_code_text">
					<h3>快速提高权重</h3>
					<p>长按识别左侧二维码注册了解详情，</p>
					<p>或访问电脑端链接:&nbsp;&nbsp;<span>https://www.ganjinshi.com?invite={{invite}}</span></p>
				</div>
			</div>
			<!-------大图--------->
			<img src="../../static/img/share-18.png"/>
			<!----------为什么------------>
			<div class="share2_why">
				<div class="share2_title">
					为什么选择赶紧试？
				</div>
				<div class="why_title">
					<img src="../../static/img/spokesman-01.png"/>
					<p>提升排名稳超同行(全网独家)</p>
				</div>
				<div class="why_content">
					用户通过手淘纯搜索进入-加购-双收藏-货比多家-访问副宝贝-手淘问大家-买家秀猜你喜欢-引爆淘内全渠道入口,排名超越同行
				</div>
				<div class="why_title">
					<img src="../../static/img/spokesman-01.png"/>
					<p>每日店铺数据可控</p>
				</div>
				<div class="why_content">
					访客浏量、加购数、收藏数、标签属性、买家兴趣点、每日转化率可控制。
				</div>
				<div class="why_title">
					<img src="../../static/img/spokesman-01.png"/>
					<p>买家行为透明化</p>
				</div>
				<div class="why_content">
					商家对买家行为全程可见,买家行为可控，系统全程监控,商家可随时查看、审核。
				</div>
			</div>
			<!------------带来什么------------->
			<div class="share2_what">
				<div class="share2_title">
					赶紧试能为商家带来什么？
				</div>
				<div class="what_item">
					<img src="../../static/img/share-19.png"/>
					<div class="what_text">
						<h3>依据淘宝最新规则，提升排名</h3>
						<p>试客需要在1-4天内完成搜索关键词、浏览、收藏、加购、手淘问大家等,一站式解决商家难题</p>
					</div>
				</div>
				<div class="what_item">
					<img src="../../static/img/share-20.png"/>
					<div class="what_text">
						<h3>新手卖家也可高枕无忧</h3>
						<p>填写搜索关键词、宝贝每天所需流量，转化率，销量、收藏加购比例，及宝贝所需的各项数据。一站式解决宝贝基础销量购买信心，评价，排名权重。</p>
					</div>
				</div>
				<div class="what_item">
					<img src="../../static/img/share-21.png"/>
					<div class="what_text">
						<h3>独家稽查系统屏蔽风险</h3>
						<p>独家严苛的审核系统严格审核用户等级、实名、IP、关联、浏览时长、信誉，满足所有6个条件才具备试用资格。</p>
					</div>
				</div>
			</div>
			<!----------问题----------->
			<div class="porblem">
				<div class="share2_title">
					你是否经常会遇到这样的问题？
				</div>
				<div class="porblem_list">
					<div class="porblem_item">
						<img src="../../static/img/share-22.png"/>
						<p>宝贝没有排名</p>
					</div>
					<div class="porblem_item">
						<img src="../../static/img/share-23.png"/>
						<p>手淘搜索排名靠后</p>
					</div>
					<div class="porblem_item">
						<img src="../../static/img/share-24.png"/>
						<p>人群标签混乱</p>
					</div>
					<div class="porblem_item">
						<img src="../../static/img/share-25.png"/>
						<p>新品成不了爆款</p>
					</div>
					<div class="porblem_item">
						<img src="../../static/img/share-26.png"/>
						<p>不了解最新规则</p>
					</div>
					<div class="porblem_item">
						<img src="../../static/img/share-27.png"/>
						<p>有流量没转化</p>
					</div>
				</div>
			</div>
			<p>赶紧试，为您解决以上烦恼</p>
		</div>
		<p>免费试用・分享赚钱</p>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2'
import wx from 'weixin-js-sdk'
export default{
	name: 'share2',
	data: function(){
		return {
			invite: '', // 邀请码
			link: 'https://www.ganjinshi.com/user/#/registerAgent?invite=', // 邀请链接
		}
	},
	methods: {
		qrcode:function() {
	      	let qrcode = new QRCode('QRcode', {
	        	width: 90,
	        	height: 90, // 高度
	        	text: this.link + this.invite // 二维码内容
	        })
	    },
	},
	created: function(){
		var _this = this;
		if(this.$route.query.invite != undefined){
			this.invite = this.$route.query.invite;
			setTimeout(function(){
				_this.qrcode();
			}, 1000);
		}
		//--------微信自定义分享链接------------
		const ua = window.navigator.userAgent.toLowerCase()
		// 如果不在微信浏览器内，微信分享也没意义了对吧？这里判断一下
		if (ua.indexOf('micromessenger') < 0) return false
		let postData = _this.$qs.stringify({
        	pageUrl: window.location.href.split('#')[0]
        });
		_this.$axios.post('/wechat/share/ticket',postData).then(function(res){
		    var data = res.data.result;
			wx.config({
			  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			  appId: data.appid, // 必填，公众号的唯一标识
			  timestamp: data.timestamp, // 必填，生成签名的时间戳
			  nonceStr: data.noncestr, // 必填，生成签名的随机串
			  signature: data.signature,// 必填，签名，见附录1
			  jsApiList: [
			    'onMenuShareAppMessage',
			    'onMenuShareTimeline',
			    'onMenuShareQQ',
			    'onMenuShareQZone'
			  ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			
			wx.ready(function(){   //需在用户可能点击分享按钮前就先调用
				/*分享给朋友*/
				wx.onMenuShareAppMessage({
					title: '定位精准人群标签，全维度提排名。', // 分享标题
				  	desc: '如何提升关键词排名/宝贝转化率/收藏加购率/获取猜你喜欢流量？戳我快速获取', // 分享描述
				    link: 'https://www.ganjinshi.com/user/#/share2?invite=' + _this.invite, // 分享链接
				    imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				    success: function(){ 
				    	
				    },
				    cancel: function(){ 
				    	
				    }
				});
				/*分享到朋友圈*/
				wx.onMenuShareTimeline({
				  	title: '定位精准人群标签，全维度提排名。', // 分享标题
				  	desc: '如何提升关键词排名/宝贝转化率/收藏加购率/获取猜你喜欢流量？戳我快速获取', // 分享描述
				    link: 'https://www.ganjinshi.com/user/#/share2?invite=' + _this.invite, // 分享链接
				    imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				    success: function(){ 
				    },
				    cancel: function(){ 
				    }
				});
				//分享给朋友和QQ
			    wx.updateAppMessageShareData({ 
			        title: '定位精准人群标签，全维度提排名。', // 分享标题
			        desc: '如何提升关键词排名/宝贝转化率/收藏加购率/获取猜你喜欢流量？戳我快速获取', // 分享描述
			        link: 'https://www.ganjinshi.com/user/#/share2?invite=' + _this.invite, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			        imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				}, function(res){ 
				//这里是回调函数 
				}); 
				//分享到朋友圈和QQ空间
				wx.updateTimelineShareData({ 
				        title: '定位精准人群标签，全维度提排名。', // 分享标题
				        link: 'https://www.ganjinshi.com/user/#/share2?invite=' + _this.invite, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				        imgUrl: 'https://www.ganjinshi.com/user/static/img/share-logo.png', // 分享图标
				}, function(res){ 
				//这里是回调函数 
				}); 
			})
		}).catch(function (error) {
		    console.log(error);
		});
	}
}
</script>

<style scoped>
#share2{
	background: url('../../static/img/share-17.jpg') no-repeat;
	background-size: 100% auto;
	padding-bottom: 3rem;
}
#share2>p{
	font-size: 1.6rem;
	color: #FFFFFF;
	font-weight: 600;
	text-align: center;
	margin-top: 2rem;
}
.share2_1{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 1rem 0;
}
.share2_1 img:first-child{
	height: 3.6rem;
	display: block;
}
.share2_1 img:last-child{
	height: 4.6rem;
	display: block;
	position: absolute;
	right: 3%;
}
.share2_2{
	width: 94%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 0 1rem;
	box-sizing: border-box;
}
.share2_2>img{
	width: 94%;
	margin: 1rem auto;
	display: block;
}
.share2_2>p{
	color: #FD7213;
	font-size: 1.6rem;
	text-align: center;
	font-weight: 600;
	margin-top: 2rem;
	padding-bottom: 2rem;
}
.share2_code{
	display: flex;
	/*align-items: center;*/
	padding: 1.5rem 0.5rem;
	border-bottom: 1px dashed #F18011;
	justify-content: space-between;
}
.share2_code .share2_code_text{
	width: 65%;
}
.share2_code .share2_code_text h3{
	color: #F18011;
	font-size: 1.4rem;
	font-weight: normal;
}
.share2_code .share2_code_text h3 span{
	margin-right: 1rem;
}
.share2_code .share2_code_text p{
	font-size: 1.2rem;
	color: #787878;
	margin-top: 0.5rem;
	word-break: break-all;
	line-height: 1.6em;
}
.share2_code .share2_code_text p span{
	color: #FF5656;
}
/*-------为什么----------*/
.share2_why{
	width: 94%;
	margin: 0 auto;
	margin-top: 3rem;
	padding: 1rem;
	box-sizing: border-box;
	border: 1px solid #F5E5BC;
	position: relative;
}
.share2_title{
	width: 80%;
	height: 2.4rem;
	background-color: #FE7615;
	border-radius: 50px;
	color: #FFFFFF;
	font-size: 1.4rem;
	text-align: center;
	line-height: 2.4rem;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -1.2rem;
}
.why_title{
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	color: #545454;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}
.why_title img{
	height: 2rem;
	display: block;
	transform: rotateY(180deg);
	margin-right: 0.5rem;
}
.why_content{
	font-size: 1.2rem;
	color: #787878;
}
/*-------带来什么----------*/
.share2_what{
	width: 94%;
	margin: 0 auto;
	margin-top: 3rem;
	padding: 1rem;
	box-sizing: border-box;
	border: 1px solid #F5E5BC;
	position: relative;
}
.what_item{
	display: flex;
	margin-top: 3rem;
}
.what_item img{
	height: 5rem;
	display: block;
	margin-top: 1rem;
}
.what_item .what_text{
	width: calc(100% - 6rem);
	margin-left: 1rem;
}
.what_item .what_text h3{
	font-size: 1.4rem;
	color: #545454;
	font-weight: normal;
	margin-bottom: 0.5rem;
}
.what_item .what_text p{
	color: #787878;
	font-size: 1.2rem;
	line-height: 1.6em;
	text-align: justify;
}
/*-------问题----------*/
.porblem{
	width: 94%;
	margin: 0 auto;
	margin-top: 3rem;
	padding: 1rem;
	box-sizing: border-box;
	border: 1px solid #F5E5BC;
	position: relative;
}
.porblem_list{
	display: flex;
	flex-wrap: wrap;
}
.porblem_item{
	width: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #545454;
	font-size: 1rem;
	margin-top: 2rem;
}
.porblem_item img{
	height: 3rem;
	display: block;
	margin-bottom: 1rem;
}
.porblem_item p{
	white-space: nowrap;
}
</style>